<template>
    <v-layout type="main">
      <p class="page-title">数据标注</p>
      <div class="working-area">
        <el-tabs
          v-model="activeTabs"
          type="card"
          @tab-click="handleClick"
          class="my-defined-tabs"
        >
          <el-tab-pane label="工作台" name="1" />
          <el-tab-pane label="标签管理" name="2" />
        </el-tabs>
        
        <working v-if="activeTabs == '1'" />
        <my-labels ref="myLabels" v-show="activeTabs == '2'" />
      </div>
    
    </v-layout>
  </template>
  <script>
  
  import myLabels from './module/labels.vue'
  import working from './module/classWorking.vue'
  
  export default {
    data() {
      
      return {
          activeTabs: "1",
      };
    },
    components: { myLabels, working },
    methods: {
      handleClick() {
        if (this.activeTabs == '2') {
          this.$refs.myLabels.getLabelsLis()
          document.removeEventListener("keydown", this.switchover)
        }
        // if (this.activeTabs == '1') {
        //   setTimeout(() => {
        //     this.getAllLabel()
        //     this.paletteSwatches()
        //     document.addEventListener("keydown", this.switchover)
        //   }, 500)
        // }
      }
    },
    async mounted() {
      this.$EventBus.$on('addLabel', () => {
        this.activeTabs = '2'
        this.$refs.myLabels.getLabelsLis()
        this.$refs.myLabels.add()
      })
    },
    
  };
  </script>
  
  <style lang="less" scoped>
  .layout {
    padding: 0 16px;
    .working-area {
      background: #fff;
      margin-top: 16px;
      padding: 16px 32px;
      box-shadow: 0px 2px 16px 0px rgba(30, 36, 128, 0.07);
      border-radius: 2px;
    }
  }
  .tool-bar {
    width: 100%;
    margin-top: 16px;
    overflow: hidden;
    .save-btn{
      float: right;
      margin-right: 16px;
    }
  }
  
  </style>
  